
var app = new Vue({
    el: '#app',
    data () {
        return {
        imgList: [],
        size: 0,
        sortList: Object
        }
    },
    methods: {
        fileClick() {
            document.getElementById('upload_file').click()
        },
        fileChange(el) {
            if (!el.target.files[0].size) return;
            this.fileList(el.target);
            el.target.value = ''
        },
        fileList(fileList) {
            let files = fileList.files;
            var _this = this;
            if(fileList.items !== undefined){//Chrome拖拽文件
                for(var i = 0; i < fileList.items.length; i++){
                    var item = fileList.items[i];
                    if(item.kind === "file" && item.webkitGetAsEntry().isFile){
                        var file = item.getAsFile();
                        if (file.size > 5*1024*1024) {
                            alert("文件尺寸不能超过5M");
                            return;
                        }
                        _this.fileAdd(file);
                    } else{
                        alert("不可以上传文件夹");
                    }
                }
            } else {
                for (let i = 0; i < files.length; i++) {
                    var file = files[i];
                    if (file.type != '') {//常规文件判断
                        if (file.size > 5*1024*1024) {
                            alert("文件尺寸不能超过5M");
                            return;
                        }
                        _this.fileAdd(file);
                    } else {
                        try {
                            var fileReader = new FileReader();
                            fileReader.readAsDataURL(file.slice(0,4));
                            fileReader.addEventListener('load',function(e){
                                if (file.size > 5*1024*1024) {
                                    alert("文件尺寸不能超过5M");
                                    return;
                                }
                                _this.fileAdd(file);
                            },false);
                            fileReader.addEventListener('error',function(e){
                                alert("不可以上传文件夹1");
                            },false);
                        } catch (e){
                            alert("不可以上传文件夹2");
                        }
                        
                    }
                }		
            }
        },
        //文件添加
        fileAdd(file) {
            //总大小
            this.size = this.size + file.size;
            //判断是否为图片文件
            if (file.type.indexOf('image') == -1) {
                file.src = 'img/wenjian.png';
                this.imgList.push({
                    file
                });
            } else {
                let reader = new FileReader();
                reader.vue = this;
                reader.readAsDataURL(file);
                reader.onload = function () {
                    file.src = this.result;
                    this.vue.imgList.push({
                        file
                    });
                }
            }
        },
        //文件删除
        fileDel(index) {
            this.size = this.size - this.imgList[index].file.size;//总大小
            this.imgList.splice(index, 1);
        },
        //文件大小格式转换
        bytesToSize(bytes) {
            if (bytes === 0) return '0 B';
            let k = 1000, // or 1024
                sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
                i = Math.floor(Math.log(bytes) / Math.log(k));
            return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
        },
        //拖动目标且鼠标进入投放区时触发
        dragenter(el) {
            el.stopPropagation();
            el.preventDefault();
        },
        //拖动目标且鼠标移动在投放区时触发
        dragover(el) {
            el.stopPropagation();
            el.preventDefault();
        },
        //拖动对象且在投放区放开鼠标时触发，要先在dragover上设置禁止默认事件，才会有触发 
        drop(el) {
            el.stopPropagation();
            el.preventDefault();
            this.fileList(el.dataTransfer);
        }
    },
    mounted(){
        var $ul = this.$el.querySelector('.upload_warp_img')
        this.sortList = Sortable.create($ul, {
            handle: '.upload_warp_img_div',
            draggable: ".upload_warp_img_div",
            animation: 150,
            onUpdate: (event) => {
                var newIndex = event.newIndex,
                oldIndex = event.oldIndex
                $li = $ul.children[newIndex],
                $oldLi = $ul.children[oldIndex]
                // 先删除移动的节点
                $ul.removeChild($li)    
                // 再插入移动的节点到原有节点，还原了移动的操作
                if(newIndex > oldIndex) {
                    $ul.insertBefore($li,$oldLi)
                } else {
                    $ul.insertBefore($li,$oldLi.nextSibling)
                }
                var item = this.imgList[event.oldIndex];
                this.imgList.splice(event.oldIndex, 1);
                this.imgList.splice(event.newIndex, 0, item);
            }
        })
    }
})
